<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-origin</title>
    <style>
      .box {
        width: 800px;
        height: 800px;
        padding: 50px;
        margin: 0 auto;

        border: 50px dotted rgba(255, 0, 0, 0.7);
        background-color: blue;
        background-image: url("../../images/fj.png");
        background-repeat: no-repeat;
        /* background-origin: padding-box; padding-box 默认值；默认参考padding左上角的原点*/
        /* background-origin: padding-box; */

        /* background-origin: content-box; content-box表示参考内容左上角原点*/
        /* background-origin: content-box; */

        background-origin: border-box;

        /* background-position: center; */
        /* background-size: cover; */
        /* background-origin: border-box; */
        /* background-origin: padding-box; */
        /* background-origin: content-box; */

        box-sizing: border-box;
        /* content-box 默认 */
        box-sizing: content-box;
      }
    </style>
  </head>
  <body>
    <div class="box">背景原点</div>
  </body>
</html>
